<template>
  <div class="app-container  bg-gray">
    <el-button v-if="queryMatch(264)" type="success" class="edit-btn bg-green" icon="el-icon-circle-plus" @click="toModify">日志管理</el-button>
    <div v-for="(item, index) in logslist" :key="index" class="timeline">
      <div class="timescale">
        <img src="../../../images/node.png">
        <div>{{ item.time }}</div>
      </div>
      <div style="height:32px" />
      <el-row v-for="(logs_item, index) in item.logs" :key="index" class="content">
        <el-card>
          <div slot="header" class="header">
            <span>{{ logs_item.title }}</span>
            <div class="text-right">{{ logs_item.created_at }}</div>
          </div>
          <div class="body" v-html="logs_item.content">{{ logs_item.content }}</div>
        </el-card>
      </el-row>
      <div style="height:36px" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      logslist: []
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      const url = 'looklog/list'
      this.$store.dispatch('GetConnect', { url }).then(res => {
        this.logslist = []
        const temp = res.data
        for (const i in temp) {
          this.logslist.push({ time: i, logs: temp[i] });
          for (const log in temp[i]){
            temp[i][log].content = temp[i][log].content.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ');
          }
        }
        // console.log(this.logslist)
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员')
      })
    },
    toModify() {
      this.$router.push({
        path: '/information/update_log'
      })
    }
  }
}
</script>

<style lang="scss" type="text/scss" scoped>
@import '../../../styles/index.scss';
.edit-btn{
  margin-bottom: 30px;
  margin-left: 24px;
}
.timeline {
  border-left: 1.7px solid $panGreen;
  padding-left: 32px;
  margin-left: 24px;
  position: relative;
  .timescale {
    @include flex-row(center, flex-start);
    position: absolute;
    left: -9.5px;
    > img {
      width: 16px;
      height: 16px;
    }
    > div {
      margin-left: 10px;
      font-size: 22px;
      font-weight: bold;
      color: $panGreen;
    }
  }

  .content {
    padding-top: 12px;
    .header {
      @include flex-row(center, space-between);
    }
    .header::before {
      content: '';
      position: absolute;
      width: 18px;
      height: 18px;
      background: linear-gradient(to top, #e8e8e8, #e8e8e8) no-repeat,
        linear-gradient(to right, #e8e8e8, #e8e8e8) no-repeat,
        linear-gradient(135deg, #fff, #fff 18px, hsla(0, 0%, 100%, 0) 18px)
          no-repeat;
      background-size: 18px 1.5px, 1.5px 18px, 18px 18px;
      transform: rotate(-45deg);
      left: -9.5px;
      top: 32px;
    }
    .body {
    }
  }
}
</style>

